<div id="calendar" class="calendar">
    <div id="dateTable" class="cal-table">
        <div id="calHeader" class="cal-body">
            <div id="calYear" class="calheader-item cal-year">
                <i id="lastYearBtn" class="btn fa fa-angle-left"></i>
                <label class="now">2017</label>
                <i id="nextYearBtn" class="btn fa fa-angle-right"></i>
            </div>
            <i id="closeBtn" class="calheader-item btn fa fa-close"></i>
        </div>

        <ul id="calMonth" class="cal-body cal-month">
            <li title="0">Jan</li>
            <li title="1">Feb</li>
            <li title="2">Mar</li>
            <li title="3">Apr</li>
            <li title="4">May</li>
            <li title="5">Jun</li>
            <li title="6">Jul</li>
            <li title="7">Aug</li>
            <li title="8">Sep</li>
            <li title="9">Oct</li>
            <li title="10">Nov</li>
            <li title="11" class="cal-month__now">Dec</li>
        </ul>

        <ul id="calWeek" class="cal-body cal-week">
            <li>Sun</li><li>Mon</li><li>Tue</li><li>Wed</li><li>Thu</li><li>Fri</li><li>Sat</li>
        </ul>

        <ul id="cal-day1" class="cal-body cal-body-day">
            <li id="2016/11/27" class="cal-day">27</li>
            <li id="2016/11/28" class="cal-day">28</li>
            <li id="2016/11/29" class="cal-day">29</li>
            <li id="2016/11/30" class="cal-day">30</li>
            <li id="2016/12/1" class="cal-day">1</li>
            <li id="2016/12/2" class="cal-day">2</li>
            <li id="2016/12/3" class="cal-day">3</li>
        </ul>
        <ul id="cal-day2" class="cal-body cal-body-day">
            <li id="2016/12/4" class="cal-day">4</li>
            <li id="2016/12/5" class="cal-day">5</li>
            <li id="2016/12/6" class="cal-day">6</li>
            <li id="2016/12/7" class="cal-day">7</li>
            <li id="2016/12/8" class="cal-day">8</li>
            <li id="2016/12/9" class="cal-day">9</li>
            <li id="2016/12/10" class="cal-day">10</li>
        </ul>
        <ul id="cal-day3" class="cal-body cal-body-day">
            <li id="2016/12/11" class="cal-day">11</li>
            <li id="2016/12/12" class="cal-day">12</li>
            <li id="2016/12/13" class="cal-day">13</li>
            <li id="2016/12/14" class="cal-day">14</li>
            <li id="2016/12/15" class="cal-day">15</li>
            <li id="2016/12/16" class="cal-day">16</li>
            <li id="2016/12/17" class="cal-day">17</li>
        </ul>
        <ul id="cal-day4" class="cal-body cal-body-day">
            <li id="2016/12/18" class="cal-day">18</li>
            <li id="2016/12/19" class="cal-day">19</li>
            <li id="2016/12/20" class="cal-day">20</li>
            <li id="2016/12/21" class="cal-day">21</li>
            <li id="2016/12/22" class="cal-day">22</li>
            <li id="2016/12/23" class="cal-day">23</li>
            <li id="2016/12/24" class="cal-day">24</li>
        </ul>
        <ul id="cal-day5" class="cal-body cal-body-day">
            <li id="2016/12/25" class="cal-day">25</li>
            <li id="2016/12/26" class="cal-day">26</li>
            <li id="2016/12/27" class="cal-day">27</li>
            <li id="2016/12/28" class="cal-day">28</li>
            <li id="2016/12/29" class="cal-day">29</li>
            <li id="2016/12/30" class="cal-day">30</li>
            <li id="2016/12/31" class="cal-day">31</li>
        </ul>
        <ul id="cal-day6" class="cal-body cal-body-day">
            <li id="2017/1/1" class="cal-day">1</li>
            <li id="2017/1/2" class="cal-day">2</li>
            <li id="2017/1/3" class="cal-day">3</li>
            <li id="2017/1/4" class="cal-day">4</li>
            <li id="2017/1/5" class="cal-day">5</li>
            <li id="2017/1/6" class="cal-day">6</li>
            <li id="2017/1/7" class="cal-day">7</li>
        </ul>
    </div>
</div>


<script>
    var urlJSON = {
    {% for post in site.posts %}
    "{{ post.url | slice: 1, 10 | replace: '-', '/' | replace: '/0', '/' | strip }}": {
        url: "{{ site.baseurl }}{{ post.url }}",
        excerpt: "{{ post.excerpt }}",
        index: {{ forloop.rindex }}
    },
    {% endfor %}
    "end": "end"
    };
    {% if page.date %}
    var activeArticle = "{{ page.date | slice: 0, 10 | replace: '-', '/' | replace: '/0', '/' }}";
    {% else %}
    var activeArticle = new Date().toLocaleDateString();
    {% endif %}
</script>
<script type="text/javascript" src="{{ "/assets/js/calendar.js" | prepend: site.baseurl }}"></script>